آموزش جامع فیگما برای UI/UX: تسلط بر طراحی وب با Figma - آخرین آپدیت

سرفصل ها و درس ها

شروع کار با فیگما Get Started with Figma

• مقدمه Introduction

• فیگما چیست و آیا از سایر برنامه‌های طراحی بهتر است؟ What is Figma and is it better than other design programs?

• اولین طراحی وب‌سایت شما Your first website design

• حل و اجرای اولین طراحی وب‌سایت Solving your first website design

• چگونه سریع کمک بگیریم How to get help fast

• صفحه خوش‌آمدگویی در فیگما The welcome screen in Figma

• شروع کار با فیگما Getting started with Figma

• بهترین روش‌های جابجایی در فیگما Best ways to move around in Figma

• تمرین: نحوه جابجایی عناصر Exercise: How to move elements around

• حل تمرین و چند نکته حرفه‌ای Solving the exercise and a few pro tips

• بررسی رابط کاربری فیگما و دلیل استفاده حرفه‌ای‌ها Discover Figma's interface & why professionals use it

• مسابقه ۱: طراحی یک وب‌سایت کوچک شخصی Contest 1: Your own mini website

• ویرایش آیکون‌ها: رنگ و اندازه Editing icons: Colors & size

• دلیل تسلیم شدن بسیاری از مبتدیان Here's why so many beginners give up

• جمع‌بندی Conclusions

کشف مهم‌ترین نکات درباره فیگما Discover the Most Important Things About Figma

• مقدمه Introduction

• بزرگترین تفاوت فیگما با سایر برنامه‌ها The biggest difference in Figma versus other programs

• نحوه ساخت دکمه‌ها در فیگما Here's how you create buttons in Figma

• مبانی کار با رنگ‌ها The basics of working with color

• چگونه مانند یک حرفه‌ای با رنگ‌ها کار کنیم How to work with color like a pro

• نحوه افزودن تصاویر: فریم‌ها در مقابل مستطیل‌ها How to add images: Frames vs rectangles

• ساخت گالری و کلاژ در فیگما Create a gallery / collage in Figma

• بررسی سه نوع متن در فیگما Here are the 3 types of text in Figma

• شناخت ویژگی‌های لایه‌های متنی Discover the properties of text layers

• نحوه کار حرفه‌ای با متن‌ها How to work with text like a pro

• افکت‌ها در فیگما: بلور، سایه‌ها و موارد دیگر Effects in Figma: Blur, shadows & more

• هر آنچه باید درباره گریدها (Grids) بدانید Everything you need to know about grids

• مروری بر کامپوننت‌ها An overview of components

• نحوه ماسک کردن در فیگما How to mask in Figma

• چه ویژگی‌هایی شما را به یک طراح وب خوب تبدیل می‌کند Here's what makes you a good web designer

• جمع‌بندی Conclusions

اولین پروژه طراحی وب First Web Design Project

• مقدمه Introduction

• تنظیم صحیح نسخه دسکتاپ Set up the desktop version the correct way

• طراحی هدر (Header) Create the header

• طراحی منوی اصلی Create the main menu

• طراحی باکس جستجو Set up the search box

• ساخت منوی کشویی (Dropdown) Create a dropdown menu

• طراحی مهم‌ترین عنصر: کارت (Card) Create the most important item – the card

• چگونه کارت‌ها را بهبود ببخشیم How to improve the cards

• تنظیم ناوبری ثانویه Set up the secondary navigation

• طراحی صفحه‌بندی (Pagination) Create the pagination

• ایجاد ساختار فوتر (Footer) Create the foundation for the footer

• افزودن محتوا به فوتر Adding content in the footer

• نحوه مدیریت نقص‌های بصری How to handle visual imperfections

• نکات کلیدی که باید به خاطر بسپارید Here's what you need to remember

• مسابقه ۲: طراحی وبلاگ شخصی شما Contest 2: Your own blog design

فریلنسینگ و کسب درآمد Freelancing

• حقیقت درباره فریلنسینگ و ماهیت واقعی آن Discover what freelancing is REALLY all about

• بدون این مهارت، موفق نخواهید شد! Without this skill, you can't succeed!

• بهترین و بدترین روش‌ها برای شروع فریلنسری Best and worst way to get started as a freelancer

• نحوه تنظیم پروفایل فریلنسری How to set up your freelancing profile

• حقیقت درباره پلتفرم‌های فریلنسینگ: Upwork, Freelancer, Fiverr The truth about freelancing platforms: Upwork, Freelancer, Fiverr

• بررسی کراد-سورسینگ: مزایا و معایب Crowdsourcing revealed: The pros and cons

• نظرسنجی: اهداف شما چیست؟ Poll: What are your goals?

• قبل از ورود به 99designs این ویدیو را ببینید! Don't go on 99designs before you watch this!

• مقایسه: کدنویسی و فتوشاپ در مقابل Adobe XD و فیگما Revealed: Coding and Photoshop vs Adobe XD vs Figma

• نحوه شروع پورتفولیو و جذب مشتری Here's how to start a portfolio and get clients

• اهمیت طرز فکر (Mindset) The importance of your mindset

• آیا رقابت در 99designs بیش از حد سخت است؟ Is the competition too difficult on 99designs?

• ابزارهای کمک به سلامت برای کار طولانی: رفع دردهای چشم، کمر و گردن 9 tools for working longer: Fix eye, back, neck pain

• بهبود خلق‌وخو و تمرکز Improve your mood & concentration

پروتوتایپ برای پروژه‌های واقعی Prototype for real world projects

• آنچه هیچ‌کس درباره پروتوتایپینگ به شما نمی‌گوید What Nobody Tells You About Prototyping

• تصویر مرجع ۲۰۲۶ Reference Image 2026 Bun

• پروتوتایپینگ ضروری است اما یک نقص بزرگ دارد Prototyping Is Essential but Has One Major Flaw

• استفاده از پروتوتایپ برای یافتن اشتباهات و نقص‌ها Use Prototyping to Find Mistakes and Flaws

• استفاده از اورلی‌ها در پروتوتایپ (پاپ‌آپ‌ها) Overlays in Your Prototypes (Pop Ups)

• تایمرها در پروتوتایپ Timers in Prototypes

• اسکرول در پروتوتایپ Scrolling in Prototypes

• پروتوتایپ هوشمندانه با این متد Prototype Smarter with This Method

• ساخت یک منوی کشویی تعاملی Making an Interactive Dropdown

• تمرین نهایی: ساخت یک پروتوتایپ کامل Final Exercise - Make a Complete Prototype

کلید دوم طراحی وب عالی The Second Key to Great Web Design

• مقدمه Introduction

• هدف از وب‌سایت چیست؟ What's the point of the website?

• کاربر در مقابل مالک کسب‌وکار The user versus the business owner

• تحلیل داده‌ها (Analytics) در طراحی وب Analytics in web design

• قالب‌ها و سایت‌سازها: پایان عصر طراحان وب؟ Templates & Website Builders – The web designer's death?

• مطالعه موردی: ۴ نسخه از یک وب‌سایت مشابه Case Study: 4 versions of the same website

• طراحی صفحه اصلی فروشگاه اینترنتی E-commerce homepage layout

• جزئیات محصول در فروشگاه اینترنتی E-commerce product details

• صفحه پرداخت (Checkout) فروشگاه E-commerce checkout

• چرا وب‌سایت‌ها کامل نیستند؟ Why aren't websites perfect?

• مطالعات موردی: نیازهای مشتری Case studies: The client's needs

• لندینگ پیج در مقابل وب‌سایت Landing page vs a website

• جذب لید (Lead Generation) در لندینگ پیج‌ها Lead generation in landing pages

• چرا لندینگ پیج‌ها شهرت بدی دارند Why landing pages have a bad reputation

• لندینگ پیج برای محصولات دیجیتال Digital product landing page

• تست لندینگ پیج‌ها Testing landing pages

• مطالعه موردی: لندینگ پیج من Case study: My landing page

• نکات نهایی درباره نیازهای مشتری Final thoughts about the client's needs

کلید سوم طراحی وب عالی The Third Key to Great Web Design

• مقدمه Introduction

• تجربه کاربری (UX) چیست؟ What's UX?

• بهترین نمونه از UX خوب و توجه به جزئیات The best example of good UX and attention to detail

• بهبود فرآیند پرداخت برای دو برابر کردن فروش Improve the checkout process to double sales

• بهبود نسخه موبایل برای افزایش فروش Improve the mobile version to double sales

• هفت تغییر کوچک در سایت که نشان‌دهنده دقت در جزئیات است 7 website tweaks that show attention to detail

• ارتقای صفحه محصول در موبایل Upgrading the mobile product page

• برگزاری جلسات تک‌به‌تک با برنامه‌نویس Doing 1-on-1 sessions with a coder

• نکات کلیدی که باید به خاطر بسپارید Here's what you need to remember

بازطراحی یک کسب‌وکار فروشگاهی Redesign an E-Commerce Business

• مهم‌ترین سوال هنگام شروع یک پروژه جدید The most important question when starting a new project

• نحوه تحقیق و یافتن الهام برای پروژه How to research/find inspiration for your project

• ایجاد ساختار پایه پروژه Set up the foundation of the project

• طراحی نوار بالایی (Top Bar) Create the top bar

• تنظیم هدر Set up the header

• انتخاب استایل برای هدر Decide on a styling for the header

• طراحی مهم‌ترین بخش: ناحیه Hero Create the most important part – the hero area

• طراحی ناوبری ثانویه: دسته‌بندی محصولات Create the secondary navigation – product categories

• جایی که فروش اتفاق می‌افتد... یا نمی‌افتد! Here's where sales are made … or not!

• ساخت اولین نسخه از کارت محصول Create the first version of the card

• تعیین استایل برای کارت Set the style for the card

• پرداخت‌های نهایی به طراحی کارت Finishing touches for the card design

• این جزئیات مهم را فراموش نکنید! Don't forget about this important detail!

• طراحی بخش سوالات متداول (FAQ) Create the FAQ section

• چرا Auto Layout فوق‌العاده است Here's why auto-layout is awesome

• ساخت فرم ثبت‌نام خبرنامه Create a newsletter sign-up form

• ایجاد ساختار پایه فوتر Set up the footer's foundation

• تکمیل فوتر Finishing the footer

• بررسی جایگزین‌ها و بهبود طراحی Explore variations & improve your design

• نحوه پرداخت به صفحات داخلی How to approach the interior pages

• طراحی ناحیه بالایی صفحه محصول Set the top area for the product's page

• افزودن محتوا به صفحه محصول Adding content to the product's page

• نحوه افزودن فراخوان‌های اقدام (CTA) واضح برای بازدیدکنندگان How to add clear calls to action for visitors

• ناحیه محتوای اصلی Main content area

• ساخت جدول برای سایدبار Create a table for the sidebar

• جمع‌بندی Conclusions

طراحی ریسپانسیو: از دسکتاپ تا موبایل Responsive Design: From Desktop to Mobile

• مقدمه‌ای بر نسخه موبایل Introduction to the mobile version

• نحوه شروع طراحی نسخه موبایل برای صفحه اصلی How to start the mobile version for the homepage

• طراحی هدر برای نسخه موبایل Create the header for the mobile version

• نحوه بازچیدمان ناحیه Hero How to rearrange the hero area

• تنظیم کارت‌ها برای گرید محصولات Set up the card for the grid of products

• هنگام ساخت کارت‌های محصول، این مرحله را نادیده نگیرید Don't skip this step when creating product cards

• چیدمان بخش سوالات متداول برای موبایل Arrange the FAQ section for the mobile version

• بازسازی خبرنامه در فضای محدود Recreate the newsletter in a narrow space

• طراحی فوتر برای نسخه موبایل Create the footer for the mobile version

• جمع‌بندی Conclusions

تبدیل طرح به نسخه نهایی و زنده Discover How the Design Gets Transformed to the Live Version

• آماده‌سازی طرح برای کدنویسی Preparing the design for coding

• زپلین: حلقه مفقوده! Zeplin - The missing link!

• نحوه تنظیم پروژه برای برنامه‌نویس و مشتری How to set up the project for the coder/client

• محتوای سمت سرور و گرافیک‌های چندلایه Server-side content and multi-layer graphics

• توسعه‌دهندگان از طراحی شما چه می‌خواهند Here's what developers want from your design

• چرا تحویل دقیق موارد مورد نیاز ضروری است Here's why it's essential you deliver what's needed

• سخن پایانی و گام‌های بعدی Final thoughts and what's next